<template>
  <main class="mt40">
    <n-form
        ref="formRef"
        :rules="rules"
        :model="model"
        label-placement="left"
        label-width="170"
        :style="{ maxWidth: '640px' }">
      <n-form-item label="用户姓名" path="username">
        <n-input v-model:value.trim="model.username" style="width: 400px" maxlength="60" placeholder="用户名"/>
      </n-form-item>
      <n-form-item label="昵称" path="nickname">
        <n-input v-model:value.trim="model.nickname" maxlength="60" placeholder="昵称"/>
      </n-form-item>
      <n-form-item label="头像" path="avatar" v-show="false">
        <n-input v-model:value.trim="model.avatar" placeholder="头像信息" v-show="false"/>
        <ksd-uploader v-model="model.avatar" :data="{'path':'avatar','oldname':avatar}" override></ksd-uploader>
      </n-form-item>
      <n-form-item label="省份" path="province">
        <n-select
            v-model:value="model.province"
            placeholder="请选择省份"
            value-field="label"
            children-field="cc"
            default-value=""
            :on-update:value="handleChangeProvince"
            :options="provinceAndCityData"
        />
        <n-select
            style="margin-left: 10px"
            v-model:value="model.city"
            clearable
            default-value=""
            placeholder="请选择城市"
            value-field="label"
            :options="provinceAndCityData[pindex]?.children"
        />
      </n-form-item>
      <n-form-item label="收货地址:" path="address">
        <n-input v-model:value.trim="model.address" placeholder="收货地址" maxlength="200"/>
      </n-form-item>
      <n-form-item label="生日" path="birthDay">
        <n-date-picker
            v-model:formatted-value="model.birthDay"
            type="date"
            class="w100"
            value-format="yyyy-MM-dd" placeholder="请选择生日"/>
      </n-form-item>
      <n-form-item label="性别" path="maleGroup">
        <n-radio-group v-model:value="model.male" name="male">
          <n-space>
            <n-radio :value="1">
              男
            </n-radio>
            <n-radio :value="0">
              女
            </n-radio>
            <n-radio :value="2">
              保密
            </n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="职业岗位:" path="job">
        <n-input v-model:value.trim="model.job" placeholder="职业岗位" maxlength="200"/>
      </n-form-item>
      <n-form-item label="自我介绍:" path="intro">
        <n-input v-model:value.trim="model.intro" placeholder="自我介绍" maxlength="600" type="textarea" :rows="10"/>
      </n-form-item>
      <n-form-item label=" " path="" class="mt10">
        <n-button round type="primary" @click="handleValidateButtonClick">
          保存资料
        </n-button>
      </n-form-item>
    </n-form>
  </main>
</template>
<script setup>
import {provinceAndCityData} from "element-china-area-data"
const pindex = ref(0)
const formRef = ref({})
const userStore = useStore.userState()
const avatar = ref("")
const model = ref({
  id: '',
  nickname: '',
  username:'',
  intro:'',
  job:'',
  address: null,
  avatar: null,
  province: null,
  city: null,
  birthDay: null,
  male: 1
})

const rules = {
  username: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入用户名！'
  },
  nickname: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入用户昵称！'
  },
  avatar: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请选择一个头像！'
  }
}

// 加载用户信息
const handleLoadUserInfo = async () => {
  const resp = await useLoadUserGetApi()
  if(resp && resp.data) {
    model.value = resp.data
    model.value.male = (resp.data.male ) * 1
    model.value.province = model.value.province || null
    model.value.city = model.value.city || null
    pindex.value = provinceAndCityData.findIndex(c => c.label == resp.data.province)
    avatar.value = resp.data.avatar
    userStore.uuid = resp.data.uuid
    userStore.username = resp.data.username
    userStore.nickname = resp.data.nickname
    userStore.avatar = resp.data.avatar
    userStore.role = resp.data.role
    userStore.authorFlag = resp.data.authorFlag
    userStore.teacherFlag = resp.data.teacherFlag
  }
}


const handleValidateButtonClick = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      try {
        const resp = await useUpdateUserSettingsApi(model.value)
        useMessage().success("修改成功，刷新或者重新登录方可查看效果!")
        userStore.username = model.value.username
        userStore.nickname = model.value.nickname
        userStore.avatar = model.value.avatar
        userStore.teacherFlag = resp.data.teacherFlag
      } catch (e) {
        useMessage().error(e.message)
      }
    }
  })
}

// 改变省份
const handleChangeProvince = (e) => {
  var cindex = provinceAndCityData.findIndex(c => c.label == e)
  if (pindex.value == cindex) return
  pindex.value = cindex
  model.value.province = e || null
  model.value.city = null
}

onMounted(() => {
  handleLoadUserInfo()
})
</script>